<template>
    <el-dialog :title="$t('wms.materialCapacity')" v-model="visible" style="width: 90%;height: 92%;"
        :close-on-click-modal="false" >
        <div style="height: 830px;">
        <div class="layout-padding-auto layout-padding-view">
            <!--查询表单-->
            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" v-loading="loading">
                <el-form-item :label="$t('iot.materialCode')" prop="materialCode">
                    <el-input v-model="state.queryForm.materialCode" :placeholder="$t('wms.pleaseEnter') + t('iot.materialCode')"/>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary"  @click="getDataList">{{$t('btn.search')}}</el-button>
                    <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
                    <el-button icon="el-icon-plus" type="primary"
                        @click="capacityeAddFormRef.openAddDialog(locationCode)">{{ $t('operation.add') }}</el-button>
                    <el-button icon="el-icon-delete" type="danger"
                        @click="handleDelete(selectObjs)">{{ $t('btn.delete') }}</el-button>
                </el-form-item>
            </el-form>
            <!--查询结果的列表-->
            <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                style="width: 100%;height: 100%" :cell-style="tableStyle.cellStyle" stripe
                :header-cell-style="tableStyle.headerCellStyle"
                @selection-change="selectionChangeHandle">
                <el-table-column type="selection" width="40" align="center" />
                <el-table-column type="index" label="#" width="50" />
                <el-table-column prop="locationCode" :label="$t('iot.locationCode')" />
                <el-table-column prop="locationName" :label="$t('iot.locationName')" />
                <el-table-column prop="materialCode" :label="$t('wms.materialCode')"  />
                <el-table-column prop="materialName" :label="$t('iot.materialName')" />
                <el-table-column prop="specification" :label="$t('wms.materialSpce')" />
                <el-table-column prop="occupyMaterialCode" :label="$t('wms.occupyMaterialCode')" />
                <el-table-column prop="occupyBarcode" :label="$t('wms.occupyBarcode')" />
                <el-table-column prop="maxCapacity" :label="$t('wms.maxCapacity')">
                    <template #default="scope">
                        <el-tag :type="''" effect="dark">
                            {{ scope.row.maxCapacity }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="barcodeStandardQty" :label="$t('wms.barcodeStandardQty')">
                    <template #default="scope">
                        <el-tag :type="''">
                            {{ scope.row.barcodeStandardQty }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="residualCapacity" :label="$t('wms.residualCapacity')">
                    <template #default="scope">
                        <el-tag :type="'success'" effect="dark">
                            {{ scope.row.residualCapacity }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="occupyQty" :label="$t('wms.occupyQty')">
                    <template #default="scope">
                        <el-tag :type="'warning'">
                            {{ scope.row.occupyQty }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="combinationType" :label="$t('wms.combinationType')">
                    <template #default="scope">
                        <el-tag :type="scope.row.combinationType === 'Single' ? 'success' : 'primary'">
                            {{ scope.row.combinationType === undefined || scope.row.combinationType === '' || scope.row.combinationType === null ? "--" : (scope.row.combinationType === 'Single' ? $t('wms.single') : $t('wms.combin')) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('basProcess.operation')" width="100">
                    <template #default="scope">
                        <el-button icon="edit" size="small" type="primary" v-auth="'platform_basDicSet_edit'"
                            @click="capacityeAddFormRef.openEditDialog(scope.row)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                v-bind="state.pagination" />
        </div>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false" icon="Close">{{ $t('common.cancelButtonText') }}</el-button>
        </span>
      </template>
    </el-dialog>
    <capacityeAdd-Form ref="capacityeAddFormRef" @refresh="getDataList"/>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import {getMaterialCapacityList, deleteMaterialCapacity} from "/@/api/platform/wms/warehouse";
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';

const capacityeAddForm = defineAsyncComponent(() => import('./capacityeAddForm.vue'));

const { t } = useI18n();
const visible = ref(false);
const capacityeAddFormRef = ref();
const loading = ref(false);
const emit = defineEmits(['refresh']);
const locationCode = ref()
const queryRef = ref()

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getMaterialCapacityList,
});
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: Array<number>) => {
  if (ids?.length === 0) {
    return useMessage().warning(t('basProcess.selectDelete'))
  }

  const idArray: IdArray = ids.map(item => (item));
  loading.value = true;
  useMessageBox().confirm(t('basProcess.permanentlyDeleted')).then(async () => {
    try {
      await deleteMaterialCapacity({
        Ids: idArray
      })
      getDataList();
      useMessage().success(t('basProcess.deleteSuccess'));
    } catch (err: any) {
      useMessage().error(t('basProcess.deleteFaild') + err.msg)
    }
  })
  loading.value = false;
};

// 重置
const resetQuery = () => {
    // 清空搜索条件
	queryRef.value?.resetFields();
    getDataList(false);
};

// 打开弹窗
const openDialog = (row: any) => {
    console.log('row'+row)
    locationCode.value = null
    visible.value = true;
    locationCode.value = row
    state.queryForm.locationCode = row
    getDataList();
};

const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
// 暴露变量
defineExpose({
    openDialog,
});
</script>